import dayjs from 'dayjs'
import Schema from 'validate'
const repairValidate = new Schema(
  {
    // 1.房屋信息id
    houseId: {
      type: String,
      required: true,
      message: '维修房屋必填',
    },
    // 2维修项目id
    repairItemId: {
      type: String,
      required: true,
      message: '维修项目必填',
    },
    // 3 手机号
    mobile: {
      type: String, // 字符串类型
      required: true, // 必填
      match: /^1[3-9]\d{9}$/, // 正则
      message: '手机号码不合法', // 提示信息
    },
    // 4预约日期
    appointment: {
      type: String,
      required: true,
      message: '预约日期必填',
    },
    // 5 问题描述-做多200字
    description: {
      type: String,
      length: { min: 1, max: 200 },
      message: '问题描述为1~200个字符',
    },
    // 6 问题附件
    attachment: {
      type: Array,
      /* use是自定义校验规则，对象里面是一个函数，参数是要校验的字段 
      如果验证通过，返回true  不通过，返回false
      */
      use: {
        attachmentLength: (v) => {
          return !!v.length
        },
      },
      message: '附件必需上传！',
    },
  },
  {
    strip: false,
  }
)
Page({
  data: {
    currentDate: new Date().getTime(), //当前日期时间戳
    houseLayerVisible: false, //控制选择保修房屋van-action-sheet组件的显示
    repairLayerVisible: false, //控制选择维修项目van-action-sheet组件的显示
    dateLayerVisible: false, //控制日期组件van-popup的显示
    houseList: [], //可维修房屋列表
    repairItem: [], //维修项目列表

    houseId: '', //房屋id
    houseInfo: '', //房屋名称
    repairItemId: '', //维修项目id
    repairItemName: '', //维修项目名称
    mobile: '17724335876',
    appointment: '', //预约日期2022-10-01
    description: '', //问题描述-做多200字
    attachment: [], //报修问题附件
  },

  // 一进入到页面，
  async onLoad({ id }) {
    this.getHouseList() //获取可维修房屋数据
    this.getRepairItem() //获取可维修房屋列表
    if (id) {
      //修改页面标题
      wx.setNavigationBarTitle({ title: '修改报修信息' })
      const res = await wx.http.get(`/repair/${id}`)
      // 解构出status,和除了status之外的数据装到data对象汇总
      const { status, ...data } = res.data
      this.setData(data)
    } else {
      //修改页面标题
      wx.setNavigationBarTitle({ title: '添加报修信息' })
    }
  },
  // 获取可维修房屋列表
  async getHouseList() {
    const res = await wx.http.get('/house')
    this.setData({
      houseList: res.data,
    })
  },
  // 获取维修项目
  async getRepairItem() {
    const res = await wx.http.get('/repairItem')
    this.setData({
      repairItem: res.data,
    })
  },
  // 选择上传文件附件
  onAfterRead(e) {
    // 获取临时地址
    const thumb = e.detail.file.thumb
    wx.uploadFile({
      url: wx.http.baseURL + '/upload', //开发者服务器地址
      filePath: thumb, //要上传文件资源的路径 (本地路径)
      header: { Authorization: `Bearer ${getApp().token}` }, //HTTP 请求 Header，Header 中不能设置 Referer
      name: 'file', //文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容
      success: async (res) => {
        // 后端返回的数据时json字符串格式，需要转为对象
        const data = JSON.parse(res.data)
        // 获取到data中的数组
        const { attachment } = this.data
        // 给数组添加新元素
        attachment.push(data.data)
        // 重新设置回data中
        this.setData({ attachment })
      },
    })
  },
  // 删除图片
  onDelete(e) {
    const { index } = e.detail //要删除图片的下标
    // 点击删除按钮  弹出对话框 点击确认 执行删除
    wx.showModal({
      title: '删除图片',
      content: '你确认删除图片吗？',
      success: ({ confirm }) => {
        if (confirm) {
          // 执行删除
          const { attachment } = this.data
          attachment.splice(index, 1)
          this.setData({ attachment })
        }
      },
    })
  },
  // wx.uploadFile(),
  // 选择了要维修的房屋
  selectHouseLayer(e) {
    this.setData({
      houseId: e.detail.id,
      houseInfo: e.detail.name,
    })
  },
  // 点击 请选择报修房屋 触发
  openHouseLayer() {
    this.setData({ houseLayerVisible: true })
  },

  // 选择保修房屋组件的关闭时触发 ，取消按钮点击时触发
  closeHouseLayer() {
    this.setData({ houseLayerVisible: false })
  },
  // 选择了要维修项目
  selectRepairLayer(e) {
    this.setData({
      repairItemId: e.detail.id,
      repairItemName: e.detail.name,
    })
  },
  // 点击 请选择维修项目 触发
  openRepairLayer() {
    this.setData({ repairLayerVisible: true })
  },
  // 选择维修项目组件的关闭时触发 ，取消按钮点击时触发
  closeRepairLayer() {
    this.setData({
      repairLayerVisible: false,
    })
  },
  // 选点击 预约日期  触发
  openDateLayer() {
    this.setData({ dateLayerVisible: true })
  },
  // 选择日期项目组件的关闭时触发 ，取消按钮点击时触发
  closeDateLayer() {
    this.setData({ dateLayerVisible: false })
  },
  // 选中日期
  onConfirmDate(e) {
    this.setData({
      appointment: dayjs(e.detail).format('YYYY-MM-DD'),
    })
    // 关闭日期组件
    this.closeDateLayer()
  },
  // 取消选中日期
  onCancelDate() {
    // 关闭日期组件
    this.closeDateLayer()
  },
  // 提交报修
  async onSubmit() {
    // 获取表单数据
    const { id, houseId, repairItemId, mobile, appointment, description, attachment } = this.data
    const params = { id, houseId, repairItemId, mobile, appointment, description, attachment }
    // 表单校验
    const Errs = repairValidate.validate(params)
    if (Errs.length) {
      return wx.utils.toast(Errs[0].message) //弹出提示信息
    }
    // 修改维修信息需要id,且有id,添加报修信息没有id,也不需要id，此时params.id=undefined
    // 所以需要判断，如果params.id=undefined，需要删除id
    if (params.id === undefined) {
      delete params.id
    }
    await wx.http.post('/repair', params)
    // 页面跳转
    wx.reLaunch({
      url: '/repair_pkg/pages/list/index',
    })
  },
})
